<template>
    <div class="page-login" :style="{'background':bgColor}">
        <login-warp @onLogin="onLogin"></login-warp>
        <login-toast :loading="toasts.loading" :toast="toasts.toast" :text="toasts.text" :icon="toasts.icon" :iconfont="toasts.iconfont"></login-toast>
    </div>
</template>

<script>
import LoginWarp from '../components/Login/Index'
import LoginToast from '../components/Common/Toast/Index'
export default {
    name: 'PageLogin',
    components: {
        LoginWarp,
        LoginToast
    },
    data() {
        return {
            toasts: {
                loading: false,
                toast: false,
                text: '',
                icon: false,
                iconfont: ''
            }
        }
    },
    methods: {
        //进入页面判断是否登录
        isLogin() {
            if(this.$store.state.userInfo) {
                this.$router.push('/mine')
            }
        },
        //点击登录
        onLogin(username,password) {
            if(username.length && password.length) {
                this.ToastLoading('登录中...')
                this.$post('users/login.php',{
                username: username,
                password: password
                })
                .then((res) => {
                    if(res.code == 200){
                        this.ToastClear()
                        this.Toast('登录成功','icon-select-bold',800)
                        this.$store.commit("setUserInfo", res.userInfo);
                        this.$store.commit('setAnimate','turn-off')
                        setTimeout(() => {
                            this.$router.push('/mine')
                        },500)
                    }else{
                        this.ToastClear()
                        this.Toast('账号或密码错误','icon-close-bold',800)
                    }
                })
            }else{
                this.Toast('请输入账号密码','icon-close-bold',800)
            }
        },
        //弹窗
        Toast(text,iconfont,time) {
            this.toasts.loading = false
            this.toasts.text = text
            this.toasts.icon = true
            this.toasts.iconfont = iconfont
            this.toasts.toast = true
            window.setTimeout(() => {
                this.toasts.toast = false
            },time);
        },
        ToastLoading(text) {
            this.toasts.loading = true
            this.toasts.icon = false
            this.toasts.text = text
            this.toasts.toast = true
        },
        ToastClear() {
            this.toasts.toast = false
        }
    },
    created() {
        this.isLogin()
    },
    computed: {
        bgColor() {
            return this.$store.state.colorItem[this.$store.state.colorIndex].bgColor
        }
    }
}
</script>

<style scoped>
.page-login{
    width:100vw;
    height:100vh;
    position: fixed;
    left:0;
    top:0;
}
</style>